<template>
  <div>
    <div>交易市场</div>
    <div>
      <!-- 查询搜索 -->
      <div class="search_panel">
        <el-form :inline="true">
          <el-form-item label="按项目搜索">
            <el-input
              class="input_class"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <!-- 显示交易表格 -->
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="trade_id" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="trade_name" label="项目名称" width="240">
          </el-table-column>
          <el-table-column
            prop="trade_quantity"
            label="出售量(tCO2e)"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="trade_offer"
            label="报价(元/tCO2e)"
            width="140"
          >
          </el-table-column>
          <el-table-column prop="publish_time" label="发布时间" width="250">
          </el-table-column>
          <el-table-column prop="trade_state" label="交易状态" width="100">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.trade_state == 2">
                {{ setOrderState(scope.row.trade_state) }}</el-tag
              >
              <el-tag type="success" v-else-if="scope.row.trade_state == 1">
                {{ setOrderState(scope.row.trade_state) }}</el-tag
              >
              <el-tag v-else>
                {{ setOrderState(scope.row.trade_state) }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="trade_state" label="交易类型" width="100">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.trade_type == 0">
                {{ setTradeType(scope.row.trade_type) }}</el-tag
              >
              <el-tag type="danger" v-else>
                {{ setTradeType(scope.row.trade_type) }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="buyer_id" label="交易方式" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.buyer_id == 0">
                <el-link :underline="false" type="success">场内交易</el-link>
              </span>
              <span v-else>
                <el-link :underline="false" type="primary">场外交易</el-link>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link
                :underline="false"
                type="primary"
                @click="handleShow(scope.$index, scope.row)"
                >查看</el-link
              >
              <el-link
                :underline="false"
                type="success"
                @click="handleShow(scope.$index, scope.row)"
                >发布</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-link
              >
              <el-link
                :underline="false"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >撤销</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.currentPage"
            :page-size="query.pageSize"
            :page-count="pageTotal"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTradeMarketPagerData } from "@/api";

export default {
  name: "MarketView",
  data() {
    return {
      query: {
        trade_name: "",
        currentPage:1,
        pageSize: 10,
      },
      pageTotal:1,
      tableData: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    //初始化方法
    initData() {
      this.getTradeMarketPagerData();
    },
    //加载交易市场分页数据
    async getTradeMarketPagerData() {
      let res = await getTradeMarketPagerData(this.query);
      console.log(res);
      if(res.code == 200){
        this.tableData = res.data.data;
        this.pageTotal = res.data.pageTotal;
      }else{
        //
      }
    },
  },
};
</script>

<style>
</style>